<template>
  <div>
    <h1>App</h1>

    <!-- 1. $store.state.xxx -->
    <p>仓库中的 a: {{ $store.state.a }}</p>
    <p>仓库中的 b: {{ $store.state.b }}</p>

    <button @click="$store.state.a++">
      不遵循 vuex 的流程能否修改 仓库的数据,可以. (((( 不要这样玩 ))))
    </button>

    <p>计算属性的方式 {{ a }} - {{ storeA }}</p>

    <button @click="storeA++">直接修改计算属性</button>

    <hr />
    <Hello />
  </div>
</template>

<script>
import Hello from "@/components/Hello.vue";

export default {
  components: {
    Hello,
  },

  computed: {
    // 2. 使用 计算属性的方式去获取
    a() {
      return this.$store.state.a;
    },

    storeA() {
      return this.$store.state.a;
    },
  },

  created() {
    console.log("App this", this);
  },
};
</script>
